<template>
	<view>
		<block v-for="(item,index) in list" :key="item.id">
			<view v-if="!item.isedit">
				<video class="work-video" :src="item.video"></video>
				<form-label label="标题">
					<text>{{item.title}}</text>
				</form-label>
				<form-label label="描述">
					<text>{{item.desc}}</text>
				</form-label>
				<view class="action-btn px-3  flex ">
					<view class="flex align-center justify-center flex-1 " hover-class="bg-light"
						@click="onVideoEdit(item)">修改</view>
					<view class="flex align-center justify-center flex-1" hover-class="bg-light"
						@click="onVideoDel(index)">删除</view>
				</view>
			</view>

			<view v-else>
				<view class=" position-relative" style="height: 320rpx;">
					<video v-if="item.video" class="work-video" :src="item.video"></video>
					<view v-if="!item.video" class="add-work-btn bg-main text-white flex align-center justify-center"
						hover-class="bg-main-hover" @click="upload(item)">
						<text class="iconfont iconjia font-md"></text>
						<text class="ml-1">添加视频</text>
					</view>
				</view>
				<view v-if="item.video" class="flex align-center justify-center font border-bottom border-top"
					hover-class="bg-light" style="height: 100rpx;" @click="upload(item)">
					点击切换视频
				</view>
				<form-label label="标题">
					<input class="uni-input" type="text" v-model="item.title" placeholder="请填写视频标题" />
				</form-label>

				<form-label label="描述">
					<view class="px-3 pt-1 w-100">
						<textarea class="uni-textarea" v-model="item.desc" placeholder="请填写视频描述..."></textarea>
					</view>
				</form-label>
				<view class="action-btn flex">
					<view class="flex align-center justify-center flex-1 bg-main text-white" hover-class="bg-main-hover"
						@click="onSubmit(item)">完成</view>
					<view class="flex align-center justify-center flex-1" hover-class="bg-light"
						@click="onVideoDel(index)">删除</view>
				</view>
			</view>
		</block>
		<divider></divider>
		<view v-if="showButton" class="add-work-btn bg-main text-white flex align-center justify-center"
			hover-class="bg-main-hover" @click="onVideoAdd">
			<text class="iconfont iconjia font-md"></text>
			<text class="ml-1">添加新章节</text>
		</view>
	</view>
</template>

<script>
	export default {
		computed: {
			showButton() {
				let arr = this.list.filter(item => {
					return item.isedit
				})
				return arr.length === 0
			}
		},
		data() {
			return {
				list: [{
					id:Math.random(10000),
					video: "https://www.bilibili.com/video/BV1nixgenEG6?t=5.1",
					title: "第一节：XXXXXX",
					desc: "第一节：XXXXXX",
					isedit: false
				}]
			};
		},
		methods: {
			// 添加视频
			onVideoAdd() {
				this.list.push({
					id:Math.random(10000),
					video: "",
					title: "",
					desc: "",
					isedit: true
				})
			},
			// 修改视频
			onVideoEdit(item) {
				item.isedit = true
			},
			onVideoDel(index) {
				console.log(index)
				uni.showModal({
					content: '是否要删除该视频？',
					success: res => {
						this.list.splice(index, 1)
					}
				});
			},
			upload(item) {
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: (res) => {
						item.video = res.tempFilePath;
					}
				});
			},
			onSubmit(item) {
				if (!item.video) {
					return uni.showToast({
						title: '视频不能为空',
						icon: 'none'
					});
				}
				if (!item.title) {
					return uni.showToast({
						title: '标题不能为空',
						icon: 'none'
					});
				}
				if (!item.desc) {
					return uni.showToast({
						title: '描述不能为空',
						icon: 'none'
					});
				}
				item.isedit = false
			}
		}
	}
</script>

<style lang="scss">
	.work-video {
		width: 750rpx;
		height: 320rpx;
	}

	.action-btn {
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
	}

	.add-work-btn {
		width: 750rpx;
		height: 100rpx;
	}
</style>